<template>
  <el-calendar v-model="value">
    <template #dateCell="{date, data}">
      <!-- slot="dateCell"
    slot-scope="{date, data}" -->
      <!-- {{ date - data }} -->
      <!-- {{ date }} -->
      <!-- {{ data.day.split('-').pop() }} -->
      {{ data.day.substring(8) }} <span class="red">{{ isWeekend(date) ? '休' : '' }}</span>
    </template>
  </el-calendar>
</template>

<script>
export default {
  data() {
    return {
      value: new Date()
    }
  },
  methods: {
    isWeekend(date) {
      const day = date.getDay()
      return day === 6 || day === 0
    }
  }
}
</script>

<style lang="scss" scope>
  .red{
    background-color: tomato;
    border-radius: 50%;
    color: #fff;
  }
</style>
